<%@ page import="ar.edu.unsam.algo3.plantasvszombies.dominio.Fila"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="layout" content="main-juego" />
</head>
<body>		
	<div style="width: 90%; padding: 15pt; margin: auto">
		<div class="clearfix content-heading"></div>

		<div class="accordion" id="accordionPadre">
			<div class="accordion-group" style="width: 100%">
				<div class="accordion-heading">
					<a class="accordion-toggle" data-toggle="collapse"
						data-parent="#accordionPadre" href="#collapseOne"> Datos del
						juego </a><br>
				</div>
				<div id="collapseOne" class="accordion-body collapse in"
					style="margin-top: 10px;">
					<div class="accordion-inner">
						<label>Jugador:</label>
						${jardin.jugador}<br /> <label>Recursos:</label>
						${jardin.recursos}<br /> <label>Filas disponibles: </label>
						${jardin.filasDisponibles}<br />
					</div>
				</div>
			</div>
			<div id="error">
				<g:if test="message">
					<div class="error">
					${message}
					</div>
				</g:if>
			</div>
			<div class="accordion-group" style="margin: auto">
				<div id="collapseTwo" class="accordion-body collapse in" style="margin-top: 20px;">
					<div class="accordion-inner">
						<div id="jardin-fila" class="content scaffold-list">
							<table
								class="table table-striped table-bordered table-hover table-condensed">
								<thead>
									<g:sortableColumn property="tipo" title="Tipo de terreno" />
									<g:sortableColumn property="plantas" title="Plantas"
										style="text-align: center;" />
									<th style="text-align: center;">Acciones</th>
								</thead>
								<tbody>
									<g:each in="${jardin.filas}" status="i" var="miFila">
										<tr>
											<td style="width: 40px;">
												${miFila.tipo}
											</td>
											<td style="text-align: left">
												${miFila.plantas}
											</td>

											<td style="width: 110px;">
												<div class="btn-group">
													<button class="btn btn-primary">Acción</button>
													<button class="btn btn-primary dropdown-toggle"
														data-toggle="dropdown">
														<span class="caret"></span>
													</button>
													<ul class="dropdown-menu">
														<li><a href="fila?idFila=${i}">Editar</a></li>
														<li><a href="eliminarFila?id=${i}">Eliminar</a></li>
														<li><a href="iniciarBatalla?idFila=${i}">Atacar</a></li>
													</ul>
												</div>
											</td>
										</tr>
									</g:each>
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
			<div class="btn-group" sytle="margin-top: 20px">
				<button class="btn btn-primary">Agregar Fila</button>
				<button class="btn btn-primary dropdown-toggle"
					data-toggle="dropdown">
					<span class="caret"></span>
				</button>
				<ul class="dropdown-menu">
					<g:each in="${jardin.tiposPosibles}" status="i" var="tipo">
						<li><a href="agregarFila?id=${i}"> ${tipo.tipo}
						</a></li>
					</g:each>
					</tbody>
				</ul>
			</div>
		</div>
	</div>
</body>
</html>